iT邦幫忙

2021 iThome 鐵人賽
DAY 20
1
自我挑戰組

Angular+Spring Boot API 處理股市資料系列 第 20 篇

Angular Stock實作流程說明(Day20)

13th鐵人賽
1057 瀏覽

  • 分享至 

  • xImage
    •  

介紹完視覺化套件之後，我們就要開始進入實作了，要在十天內做完一個簡易登入+資料視覺化呈現對Angular框架還不熟的我來說真的是蠻有挑戰性的，但是哪位工程師不是每天都接受著挑戰呢! 讓我們帶著愉快的心情進入接下來的實作過程吧~~!

目標設定:

我們需要完成的功能如下

  1. 設置一個登入頁，有兩個輸入框可以輸入帳號/密碼，還有一個登入鍵。

    需求功能:

    • 按下後將資料送到StockAPI判斷。
    • 成功就轉導至首頁並攜帶Token
    • 失敗則將原因顯示在頁面上

  2. 設置一個首頁，裡面放一個上市個股日成交資訊的連結。

    需求功能:

    • 點選後會在原頁面下方，利用視覺化套件顯示今日資料內容

流程圖:

https://ithelp.ithome.com.tw/upload/images/20211005/201388572O8K6TIe2N.png

版面需求元件:

html模板
https://ithelp.ithome.com.tw/upload/images/20211005/20138857nFhi0klqSU.jpg

html模板元件
https://ithelp.ithome.com.tw/upload/images/20211005/201388573VXMLII0Yv.jpg

OK~那我們今天先到這裡，明天開始實作囉~!


上一篇
Angular視覺化套件(Day19)
下一篇
Angular Stock登入(一)(Day21)
系列文
Angular+Spring Boot API 處理股市資料 共 32 篇
  1. 28
    Angular Stock上市個股日成交(二)(Day28)
  2. 29
    Angular Stock上市個股日成交(三)(Day29)
  3. 30
    心得結語(Day30)
  4. 31
    Angular Stock Route Guards (Day31)
  5. 32
    StockAPI-錯誤訊息處理 (Day32)
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙